<template>
	<view class="main" style="background-color: #e4ecf7;min-height: 100vh;">

		<view class="personal">
			<view v-if="userInfo == null" class="ev-fr padding">
				<view class="btn">
					<!-- #ifdef  MP-QQ -->
					<button class="login" open-type="getUserInfo" type="login" @getuserinfo="login">
						点击登陆
						<text>></text>
					</button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="login" @click="login">
						点击登陆
						<text>></text>
					</view>
					<!-- #endif -->

				</view>
			</view>
			<view v-else class="personal-main">
				<u-avatar :src="userInfo.avatarUrl" mode="square" size="120" class="u-avatar"></u-avatar>
				<view class="personal-info">
					<view class=""> {{userInfo.nickName}}</view>
					<view class="">id:12333333333</view>
				</view>
			</view>
			<u-icon name="arrow-right" size="30" class="p-right-icon"></u-icon>
		</view>

		<view class="n-p" v-for="(item,index) in list" :key="index" hover-class="hover-class" @click="onClick(item)">
			<view style="position: relative">
				<view class="p-left">
					<u-icon :name="item.icon" size="45" color="#757575"></u-icon>
				</view>
			</view>
			<view class="p-right">
				<view class="p-right-main">
					<view class="p-right-main-name">{{item.name}}</view>
					<u-badge type="warning" max="99" :value="info[item.key]"></u-badge>
				</view>

				<view class="lfet-a">
					<view style="position: relative">
					</view>
					<u-icon name="arrow-right" size="30" class="p-right-icon"></u-icon>
				</view>
			</view>
		</view>
		<!-- 	<view class="user_tab_box">
			<view class="tab_list_box">
				<view class="list_item">
					<image class="icon" src="../../static/user/tab_icon/account.png" mode=""></image>
					<view class="text">我的信息</view>
				</view>
				<view class="list_item">
					<image class="icon" src="../../static/user/tab_icon/amount.png" mode=""></image>
					<view class="text">消费明细</view>
				</view>
				<view class="list_item">
					<image class="icon" src="../../static/user/tab_icon/kefu.png" mode=""></image>
					<view class="text">客服服务</view>
				</view>
				<view class="list_item">
					<image class="icon" src="../../static/user/tab_icon/help.png" mode=""></image>
					<view class="text">用户协议</view>
				</view>
			</view>
		</view> -->


		<view class="foot_line">
			<view class="line"></view>
			<text style="margin: 0 20rpx;font-size: 16rpx;">©2021-2022 All rights reserved. </text>
			<view class="line"></view>
		</view>
	</view>
</template>

<script>
	import {
		loginT,
		OpenidLogin,
		getUserInfo
	} from '../../api/user.js'
	export default {
		data() {
			return {
				//登录防抖 flag
				userInfo: null,
				//登录防抖 flag
				isBtn: true,
				info: {

				},
				list: [{
					name: '订单',
					id: 'cardPackage',
					icon: 'grid-fill',
					iconBackground: '#33696c',
					key: "order",
					path: "/pages/core/orderlist/index"
				}, {
					name: '签到',
					id: 'expression',
					icon: 'gift-fill',
					iconBackground: '#833456',
					key: "points",
					path: "/pages/core/signin/signin"
				}, {
					name: '优惠券',
					id: 'setUp',
					icon: 'setting-fill',
					iconBackground: '#3b2021',
					key: "coupon",
					path: "/pages/core/coupon/index"
				},
				],
			}
		},
		onLoad() {
			getUserInfo().then(
				res => {
					if (res.code) {
						this.info = res.data
					}
					console.log(res)
				})

		},
		methods: {
			onClick(item) {
				const path = item.path
				uni.navigateTo({
					url: path,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getToken(openid) {
				const data = {
					openid
				}
				OpenidLogin(data).then(res => {
					if (res.code == 200) {
						console.log('获取token成功')
					}
				})
			},
			getList() {

			},
			//登陆
			login() {

				if (this.isBtn) {
					this.isBtn = false
					let userInfo = {}
					let that = this

					// 获取用户信息
					uni.getUserProfile({
						desc: '登陆授权认证',
						success: (res) => {
							that.loading = true

							userInfo.nickName = res.userInfo.nickName
							userInfo.avatarUrl = res.userInfo.avatarUrl
							userInfo.gender = res.userInfo.gender
							uni.getProvider({
								service: "oauth",
								success(res) {
									if (~res.provider.indexOf('qq')) {
										uni.login({
											provider: 'qq',
											scopes: 'auth_user',
											success: function(loginRes) {
												loginT(loginRes.code, 'qq').then(
													res => {
														// console.log(res)
														userInfo.userId = res.result
															.data
															.data.openid
														uni.setStorageSync('userInfo',
															userInfo)

														that.getToken(userInfo.userId)

														that.userInfo = userInfo
														that.getList()
														that.loading = false
													})
											}
										});
									} else if (~res.provider.indexOf('weixin')) {
										uni.login({
											provider: 'weixin',
											scopes: 'auth_user',
											success: function(loginRes) {
												loginT(loginRes.code, 'weixin').then(
													res => {
														userInfo.userId = res.result
															.data
															.data.openid
														uni.setStorageSync('userInfo',
															userInfo)
														that.getToken(userInfo.userId)

														that.userInfo = userInfo
														that.getList()
														that.loading = false
													})
											}
										});
									}
								}
							})

						},
						fail: () => {
							that.isBtn = true
						}
					});
				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f7f7;
	}

	.personal {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 110rpx 50rpx 50rpx 50rpx;
		;
	}

	.personal-main {
		display: flex;
		align-items: center;
	}

	.personal-info {
		display: flex;
		flex-direction: column;
	}

	.u-avatar {
		margin-right: 30rpx;
	}

	.navbar-right {
		padding: 0 40rpx;
	}

	.navbar-right-icon {
		margin-left: 50rpx;
	}

	.hover-class {
		background-color: #efefef;
	}

	.n-p {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}

	.p-right-icon {
		padding: 0 40rpx;
	}

	.p-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		padding: 10rpx;
		margin: 20rpx;
		color: #FFFFFF;
		border-radius: 10rpx;

	}

	.p-right {
		height: 90rpx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.p-right-main {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.p-right-main-name {
		font-size: 36rpx;
		font-weight: 500;
	}

	.p-right-main-time {
		margin-right: 20rpx;
		font-size: 24rpx;
		color: #9d9d9d;
	}

	.btn {
		margin: 50rpx;
	}

	.user_header_box {
		height: 340rpx;
		width: 100%;
		background-image: url(../../static/user/head_bg.png);
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: left;

		.avatar_box {
			margin-left: 80rpx;

			.img {
				height: 120rpx;
				width: 120rpx;
			}
		}

		.user_info {
			color: #fff;
			margin-left: 20rpx;

			.name {}

			.uid {}
		}
	}

	.user_amount_box {
		width: 90%;
		margin: -90rpx auto 0 auto;

		.user_level {
			border-radius: 10rpx 10rpx 0 0;
			background-color: #e2eefe;
			padding: 10rpx 14rpx;
			display: flex;
			align-items: center;

			.icon {
				height: 60rpx;
				width: 60rpx;
			}

			.level_desc_box {
				margin-left: 20rpx;

				.title {
					font-size: 28rpx;
				}

				.desc {
					font-size: 20rpx;
					color: #808080;
				}
			}

			.right_icon {
				height: 26rpx;
				width: 16rpx;
				margin-left: auto;
				padding-right: 10rpx;
			}
		}

		.amount_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 0 0 10rpx 10rpx;
			padding: 40rpx 60rpx;

			.amount {
				font-size: 46rpx;
			}

			.now_with {
				background-color: #ffa415;
				color: #fff;
				padding: 8rpx 30rpx;
				border-radius: 5rpx;
			}
		}
	}

	.user_tab_box {
		background-color: #fff;
		width: 96%;
		margin: 2% auto;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;

		.tab_title {
			font-size: 30rpx;
		}

		.tab_list_box {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.list_item {
				width: 25%;
				text-align: center;
				margin: 16rpx 0;

				.icon {
					height: 80rpx;
					width: 80rpx;
				}

				.text {
					color: #666666;
					margin-top: -10rpx;
					font-size: 26rpx;
				}
			}
		}
	}

	.loan_box {
		background-color: #fff;
		width: 90%;
		margin: 20rpx auto;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;

		.loan_title_box {
			display: flex;
			align-items: center;
			padding-top: 6rpx;

			.title {
				font-size: 30rpx;
			}

			.link {
				margin-left: auto;
				color: #797979;
				font-size: 20rpx;
			}
		}

		.loan_list {
			margin-top: 30rpx;

			.list_item {
				padding: 0 10rpx;
				border-bottom: 1px solid #e9e9e9;
				margin-top: 20rpx;

				.item_head {
					display: flex;
					align-items: center;

					.pic {
						height: 100rpx;
						width: 100rpx;
					}

					.loan_info {
						margin-left: 20rpx;

						.name {
							color: #797979;
							font-weight: 600;
						}

						.date {
							color: #797979;
							margin-top: 6rpx;
						}
					}

					.join_btn {
						background-color: #2979ff;
						color: #fff;
						margin-left: auto;
						margin-right: 20rpx;
						padding: 6rpx 30rpx;
						border-radius: 30rpx;
						font-size: 28rpx;
					}
				}

				.item_bottom {
					display: flex;
					margin-top: 20rpx;
					padding-bottom: 14rpx;

					.bottom_item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;

						.names {
							color: #797979;
						}

						.amount {
							color: #ff0548;
							margin-top: 6rpx;
							font-weight: 600;
						}
					}
				}
			}
		}
	}

	.foot_line {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 20rpx;
		color: #5f5f5f;

		.line {
			width: 200rpx;
			border-bottom: 1px solid #5f5f5f;
		}
	}
</style>
